<template>
    <div>
        <!-- 删除按钮的提示 -->
        <el-dialog
          title="提示"
          :visible.sync="deleteVisible"
          width="30%">
          <span>确定要删除 {{temp.modelName}} 这个模型吗 </span>
          <span slot="footer" class="dialog-footer">
            <el-button type="danger" @click="deletedata">确 定</el-button>
          </span>
        </el-dialog>
        <!-- 编辑模型信息 -->
        <el-dialog title="编辑信息" :visible.sync="bianjiVisible">
          <el-form :model="form">
            <el-form-item label="模型名称" >
              <el-input v-model="form.modelName"></el-input>
            </el-form-item>
            <el-form-item label="模型版本" >
              <el-input v-model="form.modelTag"></el-input>
            </el-form-item>
            <el-form-item label="模型描述" >
              <el-input v-model="form.modelDescription"></el-input>
            </el-form-item>
            <el-form-item label="模型类型">
              <el-input v-model="form.modelType"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="makechange">确 定</el-button>
          </div>
        </el-dialog>
        <!-- 模型表格 -->
        <el-table
          @row-click="row"
          :data="modelData"
          size
          style="width: 100%">
          <el-table-column
            prop="modelName"
            label="模型名称"
            >
          </el-table-column>
          <el-table-column
            prop="modelTag"
            label="模型版本"
            >
          </el-table-column>
          <el-table-column
            prop="modelDescription"
            label="模型描述"
            >
          </el-table-column>
          <el-table-column
            prop="modelSize"
            label="模型大小">
          </el-table-column>
          <el-table-column
            prop="modelState"
            label="模型状态">
          </el-table-column>
          <el-table-column
            prop="modelType"
            label="模型类型">
          </el-table-column>
          <el-table-column
            label="操作">
            <el-button type="primary" size="mini" @click="bianjiVisible=true">编辑</el-button>
            <el-button type="danger" size="mini" @click="deleteVisible=true">删除</el-button>
          </el-table-column>
          
        </el-table>
        <el-pagination
          @current-change="pagechange"
          layout="prev, pager, next"
          :total="total">
        </el-pagination>
    </div>
</template>
<script>
import { baseUrls } from "@/main.js";
export default {
  data () {
    return {
      //模型数据
      modelData:[],
      //表格总数据
      total:1,
      //中途保存row的数据
      temp:{},
      //删除提示框
      deleteVisible:false,
      //编辑提示框
      bianjiVisible:false,
      //编辑表格数据
      form:{
        modelName:'',
        modelDescription:'',
        modelType:'',
        id:'',
        modelTag:''
      },
      //当前页
      page:1,
    }
  },
  methods:{
    //分页请求
    getbypage(){
      this.$http.get(`${baseUrls.base2}/model/page`+`?currentPage=${this.page}`).then((res) => {
        this.total=res.data.data.total;
        res.data.data.records.forEach(i => {
          this.modelData.push(i);
        });
      });
    },
    //表格点击
    row(row){
      this.temp=row;
      this.form.id=row.id;
      this.form.modelName=row.modelName;
      this.form.modelDescription=row.modelDescription;
      this.form.modelType=parseInt(row.modelType) ;
      this.form.modelTag = row.modelTag;
    },
    //删除模型
    deletedata(){

      this.$http.delete(`${baseUrls.base2}/model`,{params:{modelId:this.temp.id},Headers:{"Content-Type": "application/x-www-form-urlencoded"}}).then((result) => {
        console.log(result)
        this.deleteVisible=false;
        this.$message.success('删除成功')
        setTimeout(()=>{
           this.$router.go(0);
        },1000)
       
      }).catch((err) => {
        console.log(err)
      });
    },
    //确认编辑信息
    makechange(){
      this.bianjiVisible=false;
      this.$http.put(`${baseUrls.base2}/model`,this.form).then((res)=>{
       console.log(res);
              if(res.data.status===200){
         this.$message.success('修改成功')
         this.$router.go(0)
         
       }
       })
    },
    //页数改变
    pagechange(page){
      this.page=page;
      this.modelData=[];
      this.getbypage();
      sessionStorage.setItem('page',this.page);
    }
  },
  //生命周期函数
  created(){
    this.getbypage();
  },

}
</script>
<style scoped>

</style>
